<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

		<script
			type="text/javascript"
			src="../build/bower_components/promise-polyfill/promise.js"
		></script>

		<script
			type="text/javascript"
			src="../build/bower_components/custom-event-polyfill/custom-event-polyfill.js"
		></script>

		<script
			id="conversational-form-development" 
			type="text/javascript"
			src="../build/cf/ConversationalForm.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/parsing/TagsParser.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ConversationalForm.plugin.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/logic/Helpers.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/logic/EventDispatcher.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/interfaces/IUserInterfaceOptions.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/BasicElement.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/ControlElement.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/ControlElements.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/ScrollController.js"
		></script>

		<script 
			type="text/javascript"
			src="../build/cf/data/Dictionary.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/Tag.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/TagGroup.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/InputTag.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/SelectTag.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/ButtonTag.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/OptionTag.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/Button.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/RadioButton.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/CheckboxButton.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/OptionButton.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/OptionsList.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/UploadFileUI.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/interfaces/IUserInput.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/interfaces/IUserInputElement.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/inputs/UserInputElement.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/inputs/UserTextInput.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/logic/MicrophoneBridge.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/inputs/UserInputSubmitButton.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/chat/ChatResponse.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/chat/ChatList.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/logic/FlowManager.js"
		></script>

		<link type="text/css" rel="stylesheet" href="../build/conversational-form.css"/>

	</head>
	
	
	<body>
			
				<form id="cf-form" style="visibility: hidden;">

					<input type="text" cf-questions="What is your name?" name="name1" value="John Doe">
					<input type="text" cf-questions="What is your name?" name="name2" value="John Doe">
					<textarea name="testmultirows" id="testmultirows" rows="2"></textarea>
					<input type="text" cf-questions="What is your name?" name="name3" value="John Doe">
					<textarea name="testmultirows" id="testmultirows" rows="3"></textarea>
					<input type="text" cf-questions="What is your name?" name="name4" value="John Doe">
					<input type="text" cf-questions="What is your name?" name="name5" value="John Doe">
					<input type="text" cf-questions="What is your name?" name="name6" value="John Doe">

					<fieldset>
						<label for="tmnj">Do you like Teenage Mutant Ninja Turtles?</label>
						<select cf-questions="Do you like Teenage Mutant Ninja Turtles?" name="tmnj" class="form-control">
							<option>Yes</option>
							<option>No</option>
						</select>
					</fieldset>

					<input type="text" cf-questions="What is your name?" name="name" value="John Doe">
					<input type="text" cf-questions="Great {name}&&Where are you from?" name="location" value="United States of America">
					
					<select name="car">
						<option>Toyota</option>
						<option>Mercedes</option>
						<option>Mazda</option>
						<option>GMC</option>
						<option>Audi</option>
						<option>Lada</option>
						<option>Jeep</option>
						<option>Ford</option>
						<option>Subaru</option>
						<option>Hyundai</option>
						<option>BMW</option>
					</select>

					<div class="radio-control" >
            <input cf-label="AI" type="radio" cf-image="https://space10io-zhjgfejx8sl.netdna-ssl.com/content/uploads/2016/10/julesslutsky1-400x265.jpg" name="image-preference" tabindex="1" value="0">
            <input cf-label="Meatball" type="radio" cf-image="https://space10io-zhjgfejx8sl.netdna-ssl.com/content/uploads/2015/12/tomorrows_meatball_08-400x265.jpg" name="image-preference" tabindex="2" value="1" checked="checked">
          </div>


				</form>

			<button class="pause" onClick="javascript:pause();">Pause/Resume</button>
			<p>&nbsp;</p>
			<div id="cf-context" role="cf-context" cf-context style="height: 400px; width: 400px; border: 1px solid #999;">
				
			</div>

		<script>
				window.paused = true;
				var answerAfter = 2500;

				function pause() {
    			window.paused = !window.paused;
    			if (window.paused === false) submitAnswer();
    		}

    		// setTimeout(function() {
			// 		submitAnswer();		    			
    		// }, answerAfter);

    		function submitAnswer() {
    			if (window.paused === true) return;
    			if (ConversationalForm.flowManager.maxSteps === ConversationalForm.flowManager.step) window.location.reload();
    			ConversationalForm.userInput.doSubmit();

	    		setTimeout(function() {
						submitAnswer();		    			
	    		}, answerAfter);
    		}

		    window.onload = function(){
		    		var conversationalForm = window.cf.ConversationalForm.startTheConversation({
		            formEl: document.getElementById("cf-form"),
								context: document.getElementById("cf-context"),
								animationsEnabled: true,
		            // hideUserInputOnNoneTextInput: true,
		            submitCallback: function() {
                  conversationalForm.addRobotChatResponse(
                    "Check the dev console for FormatData output."
                  );
                }
		        });
		    };
		</script>
	</body>

</html>